import React from 'react';
import { Card, Table, Button, Space, Input, Form, Select, Tag, Modal, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

const { Option } = Select;
const { TextArea } = Input;

interface NodeRecord {
  id: string;
  name: string;
  identityId: string;
  publicKey: string;
  ipAddress: string;
  port: string;
  networkType: string;
  status: string;
  createTime: string;
}

const NodeManagement = () => {
  const [form] = Form.useForm();
  const [modalForm] = Form.useForm();
  const [modalVisible, setModalVisible] = React.useState(false);
  const [editingRecord, setEditingRecord] = React.useState<NodeRecord | null>(null);

  const handleSearch = () => {
    form.validateFields().then(values => {
      console.log('Search values:', values);
    });
  };

  const handleReset = () => {
    form.resetFields();
  };

  const handleAdd = () => {
    setEditingRecord(null);
    modalForm.resetFields();
    setModalVisible(true);
  };

  const handleEdit = (record: NodeRecord) => {
    setEditingRecord(record);
    modalForm.setFieldsValue(record);
    setModalVisible(true);
  };

  const handleModalOk = () => {
    modalForm.validateFields().then(values => {
      console.log('Form values:', values);
      message.success(`${editingRecord ? '修改' : '新增'}成功`);
      setModalVisible(false);
    });
  };

  const columns: ColumnsType<NodeRecord> = [
    {
      title: '节点ID',
      dataIndex: 'id',
      key: 'id',
      width: 120,
      ellipsis: true,
    },
    {
      title: '节点名称',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      ellipsis: true,
    },
    {
      title: '身份标识',
      dataIndex: 'identityId',
      key: 'identityId',
      width: 200,
      ellipsis: true,
    },
    {
      title: '公钥',
      dataIndex: 'publicKey',
      key: 'publicKey',
      width: 200,
      ellipsis: true,
    },
    {
      title: '网络信息',
      children: [
        {
          title: 'IP地址',
          dataIndex: 'ipAddress',
          key: 'ipAddress',
          width: 130,
        },
        {
          title: '端口',
          dataIndex: 'port',
          key: 'port',
          width: 100,
        },
        {
          title: '网络类型',
          dataIndex: 'networkType',
          key: 'networkType',
          width: 120,
          render: (text: string) => <Tag color="blue">{text}</Tag>,
        },
      ],
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: string) => {
        const color = status === 'online' ? 'success' : 'error';
        const text = status === 'online' ? '在线' : '离线';
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 160,
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 120,
      render: (_: unknown, record: NodeRecord) => (
        <Space size="middle">
          <Button type="link" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button type="link" danger>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const mockData: NodeRecord[] = [
    {
      id: 'NODE-001',
      name: '北京节点-01',
      identityId: 'ID12345678',
      publicKey: 'MIGfMA0GCSqGSIb3DQEBAQUAA...',
      ipAddress: '192.168.1.100',
      port: '8080',
      networkType: '专有网络',
      status: 'online',
      createTime: '2024-01-20 10:30:00',
    },
    {
      id: 'NODE-002',
      name: '上海节点-01',
      identityId: 'ID87654321',
      publicKey: 'MIGfMA0GCSqGSIb3DQEBAQUAA...',
      ipAddress: '192.168.1.200',
      port: '8080',
      networkType: '公网',
      status: 'offline',
      createTime: '2024-01-20 10:29:55',
    },
  ];

  return (
    <div style={{ paddingTop: '20px' }}>
      <Card bordered={false}>
        <Form
          form={form}
          layout="inline"
          style={{ marginBottom: '24px' }}
          onFinish={handleSearch}
        >
          <Form.Item name="id" label="节点ID">
            <Input placeholder="请输入节点ID" />
          </Form.Item>
          <Form.Item name="name" label="节点名称">
            <Input placeholder="请输入节点名称" />
          </Form.Item>
          <Form.Item name="status" label="状态">
            <Select placeholder="请选择状态" style={{ width: 150 }}>
              <Option value="online">在线</Option>
              <Option value="offline">离线</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button onClick={handleReset}>重置</Button>
            </Space>
          </Form.Item>
        </Form>

        <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'flex-end' }}>
          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
            新增节点
          </Button>
        </div>

        <Table<NodeRecord>
          columns={columns}
          dataSource={mockData}
          rowKey="id"
          scroll={{ x: 1500 }}
          pagination={{
            total: mockData.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条记录`,
          }}
        />

        <Modal
          title={`${editingRecord ? '编辑' : '新增'}节点`}
          open={modalVisible}
          onOk={handleModalOk}
          onCancel={() => setModalVisible(false)}
          width={700}
        >
          <Form
            form={modalForm}
            layout="vertical"
            style={{ marginTop: '24px' }}
          >
            <Form.Item
              name="name"
              label="节点名称"
              rules={[{ required: true, message: '请输入节点名称' }]}
            >
              <Input placeholder="请输入节点名称" />
            </Form.Item>
            <Form.Item
              name="identityId"
              label="身份标识"
              rules={[{ required: true, message: '请输入身份标识' }]}
            >
              <Input placeholder="请输入身份标识" />
            </Form.Item>
            <Form.Item
              name="publicKey"
              label="公钥"
              rules={[{ required: true, message: '请输入公钥' }]}
            >
              <TextArea rows={4} placeholder="请输入公钥" />
            </Form.Item>
            <Form.Item
              name="ipAddress"
              label="IP地址"
              rules={[{ required: true, message: '请输入IP地址' }]}
            >
              <Input placeholder="请输入IP地址" />
            </Form.Item>
            <Form.Item
              name="port"
              label="端口"
              rules={[{ required: true, message: '请输入端口' }]}
            >
              <Input placeholder="请输入端口" />
            </Form.Item>
            <Form.Item
              name="networkType"
              label="网络类型"
              rules={[{ required: true, message: '请选择网络类型' }]}
            >
              <Select placeholder="请选择网络类型">
                <Option value="专有网络">专有网络</Option>
                <Option value="公网">公网</Option>
              </Select>
            </Form.Item>
          </Form>
        </Modal>
      </Card>
    </div>
  );
};

export default NodeManagement; 